<script setup lang="ts">

import SwiperCom from "@/views/index/swiperCom.vue";
import IntroduceCom from "@/views/index/introduceCom.vue";
import TeacherRecommend from "@/views/index/teacherRecommend.vue";
import FeaturedArticles from "@/views/index/featuredArticles.vue";
import NavigationBar from "@/components/navigationBar.vue";
import CrisisCom from "@/views/index/crisisCom.vue";
</script>

<meta name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<template>
    <div class="boxMax">
        <div class="box">
<!--            标题-->
            <div class="headTitle">
                <p class="titleText">心理健康咨询</p>
            </div>
<!--            搜索框-->
            <div class="substance">
                <router-link to="/substance">
                    <img src="../assets/images/搜索.png" alt="" class="inputS">
                </router-link>
            </div>
<!--            轮播图-->
            <div class="swiperBox">
                <swiper-com></swiper-com>
            </div>
<!--            中心介绍与评测-->
            <div class="function">
                <introduce-com></introduce-com>
            </div>
<!--            名师推荐-->
            <div class="teacher">
                <teacher-recommend></teacher-recommend>
            </div>
<!--            精品文章-->
            <div class="boutiqueArticles">
                <featured-articles></featured-articles>
            </div>
<!--            危险干预-->
            <div class="crisis">
                <crisis-com></crisis-com>
            </div>
        </div>
    </div>

  <!--        底部导航-->
    <div class="navigationBar">
        <navigation-bar></navigation-bar>
    </div>
</template>

<style scoped lang='less'>
* {
    margin: 0;
    padding: 0;
}
.boxMax {
    width: 100%;
    background-color: #F5F8FB;
  box-sizing: border-box;
}
.box {
    margin: auto;
    width: 96%;
    .headTitle {
        font-size: 4vw;
        min-height: 15vw;
        line-height: 10vw;
    }
    .substance {
        margin-bottom: 5%;
        min-width: 100%;
        height: 8vw;
        .inputS {
            width: 100%;
            height: 100%;
            text-align: center;
            border-radius: 5px;
            border: 1px solid rgba(23,15,26,0.2);
        }
    }
    .swiperBox {
        margin-top: 5px;
    }
    .function,
    .boutiqueArticles {
        margin-top: 15px;
    }
    .teacher {
        margin-top: 15px;
        background-color: #fff;
        border-radius: 15%;
    }
}

.crisis {
    position: fixed;
    bottom: 20%;
    right: 3%;
}

.navigationBar {
    position: fixed;
    padding: 3% 0;
    width: 100%;
    min-height: 5%;
    background-color: #fff;
    bottom: 0;
    border: 1px solid rgba(42, 43, 65, 0.2);
}

</style>